<template>
    <div>
        <div>
            <div style="height: 50px">
                <el-page-header @back="$router.push({path: '/views/index/index'})" content="个人中心">
                </el-page-header>
            </div>
            <el-form ref="form" :model="userInfo" label-width="100px" style="width: 500px">
                <el-form-item label="用户昵称">
                    <el-input v-model="userInfo.userNickname" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="userInfo.userName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-input v-model="userInfo.deptName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="企业编号">
                    <el-input v-model="userInfo.orgNum" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="show = true">修改密码</el-button>
                    <el-button @click="$router.push({path: '/views/index/index'})">返回</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- 修改密码 -->
        <el-dialog title="修改密码" :visible.sync="show" width="30%">
            <el-form ref="form" :model="form" label-position="left" label-width="80px">
                <el-form-item label="原密码">
                    <el-input v-model="form.oldPassword" @change="getByPwd" placeholder="请验证旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form.newPassword" placeholder="请输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="update()">修改</el-button>
                <el-button @click="show = false">返回</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "detail",
    data() {
        return {
            // userInfo: this.$store.getters.getUserInfo,
            userInfo: "张三",
            // 修改密码数据
            form: {
                oldPassword: '',
                newPassword: ''
            },
            // 修改密码栏展示
            show: false,
            // 验证旧密码是否正确
            change: false,
        }
    },
    methods: {
        // 验证旧密码
        getByPwd() {
            if (null == this.form.oldPassword) {
                that.$message({
                    message: "原密码不可为空 ！",
                    type: 'error'
                });
                that.change = false
                return;
            }
            let agentUsers = {"password": this.form.oldPassword, "userName" : this.userInfo.userName}
            let that = this
            this.$request("/api/emp/getByPwd/1_0", agentUsers, "POST").then((data) => {
                if (null != data.data) {
                    that.$message({
                        message: "原密码正确 ！",
                        type: 'success'
                    });
                    that.change = true
                    return;
                }
                that.$message({
                    message: "原密码错误 ！",
                    type: 'error'
                });
                that.change = false
            });
        },

        // 改密码
        update() {
            let agentUsers = {"password" : this.form.newPassword, "userName" : this.userInfo.userName}
            let that = this
            if (this.change) {
                this.$request("/api/emp/updatePwd/1_0", agentUsers, "POST").then((data) => {
                    that.$message({
                        message: "修改成功 ！",
                        type: 'success'
                    });
                    that.show = false
                });
            } else {
                that.$message({
                    message: "请先验证原密码 ！",
                    type: 'error'
                });
            }
        },
    },
}
</script>
